<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>支付管理</el-breadcrumb-item>
        <el-breadcrumb-item>支付渠道管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">支付渠道管理</div>
      <div class="orderList">
        <div class="entirety">
          <div class="top">
            <div>
              <el-button
                class="small"
                icon="el-icon-search"
                type="info"
                @click.native.prevent="isSelect"
                >查询</el-button
              >
              <el-button
                class="small"
                icon="el-icon-delete"
                type="danger"
                @click.native.prevent="isEmpty"
                >清空</el-button
              >
              <el-button
                class="small"
                style="background-color:#fd804c;color: #fff;"
                @click="isDialog('新建支付渠道')"
                >新建支付渠道
              </el-button>
            </div>
            <div class="topfist">
              <span style="width:110px;">支付渠道名称</span>
              <el-input
                v-model="name"
                placeholder="支付渠道名称查询"
              ></el-input>
            </div>
          </div>
          <el-dialog :title="msg" :visible.sync="dialogVisible" width="50%">
            <el-form
              ref="form"
              :model="form"
              status-icon
              label-width="130px"
              label-position
              class="demo-ruleForm"
            >
              <el-form-item
                label="配置图片:"
                prop="imgUrl"
                v-if="msg == '编辑支付渠道'"
              >
                <div>
                  <div style=" float: left;">
                    <img :src="form.icon" class="avatar" v-if="form.icon" />
                  </div>
                  <div style="float: left;margin-top:33px; padding-left:15px;">
                    <el-upload
                      class="avatar-uploader"
                      action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                      :headers="{ uploadScene: 'avatar' }"
                      :on-success="handleAvatarSuccess"
                      :show-file-list="false"
                      :before-upload="beforeAvatarUpload"
                    >
                      <div class="change">更换头像</div>
                    </el-upload>
                  </div>
                </div>
              </el-form-item>
              <el-form-item
                label="配置图片:"
                prop="imgUrl"
                v-if="msg == '新建支付渠道'"
              >
                <el-upload
                  class="avatar-uploader"
                  action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
                  :headers="{ uploadScene: 'avatar' }"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="icon" :src="icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="支付名称">
                <el-input
                  v-model="form.name"
                  placeholder="请输入支付名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="限制金额">
                <el-input
                  v-model="form.limit_quota"
                  placeholder="请输入限制金额"
                ></el-input>
              </el-form-item>
              <el-form-item label="显示位置">
                <el-select
                  v-model="form.serial_no"
                  placeholder="请选择"
                  size="medium"
                >
                  <el-option
                    v-for="(item, i) in numList"
                    :key="i"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="渠道类型
"
              >
                <el-select v-model="form.channel_type" placeholder="请选择">
                  <el-option
                    v-for="item in ChannelData"
                    :key="item.configKey"
                    :label="item.configValue"
                    :value="item.configKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="渠道编号">
                <el-select v-model="form.code" placeholder="请选择">
                  <el-option
                    v-for="item in modeCodes"
                    :key="item.configKey"
                    :label="item.configValue"
                    :value="item.configKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="限额处理">
                <el-select
                  v-model="form.limit_quota_handle"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in quotaHandle"
                    :key="item.configKey"
                    :label="item.configValue"
                    :value="item.configKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="支付方式">
                <el-switch
                  v-model="form.is_reco"
                  active-value="1"
                  inactive-value="0"
                ></el-switch>
              </el-form-item>

              <!-- <el-form-item>
                <el-button                   style="background-color:#fd804c;color: #fff;" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
              </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                @click="isSubmit"
                >立即创建</el-button
              >
            </span>
          </el-dialog>
        </div>
        <div class="entirety">
          <el-table :data="tableData" style="width: 100%;" border>
            <el-table-column prop="icon" label="图片">
              <template slot-scope="scope">
                <el-image
                  style="width: 70px; height: 30px"
                  :src="scope.row.icon"
                  :preview-src-list="[scope.row.icon]"
                  :fit="'contain'"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="支付渠道名称" width="180">
            </el-table-column>
            <el-table-column prop="serialNo" label="展示位置">
            </el-table-column>
            <el-table-column prop="channelType" label="渠道类型">
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="info"
                  @click="isDialog('编辑支付渠道', scope.row)"
                  >修改</el-button
                >
                <el-button type="danger" @click="isDel(scope.row.channel_id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      msg: "",
      dialogVisible: false,
      form: {
        channel_type: "",
        code: "",
        founder: "",
        icon: "",
        is_reco: 0,
        limit_quota: 0,
        limit_quota_handle: "",
        name: "",
        serial_no: 0
      },
      channel_id: "",
      icon: "",
      quotaHandle: [],
      ChannelData: [],
      modeCodes: [],
      tableData: [],
      numList: [1, 2, 3]
    };
  },
  activated() {
    this.savalist();
    this.quotaHandles();
    this.extraconfigChannels();
    this.modeCodess();
  },
  methods: {
    extraconfigChannels() {
      this.$http({
        url: `/paymentadmin/v1/extraconfig/query`,
        method: "GET",
        params: {
          configType: "channel_types"
        }
      }).then(res => {
        this.ChannelData = res.data;
      });
    },
    modeCodess() {
      this.$http({
        url: `/paymentadmin/v1/extraconfig/query`,
        method: "GET",
        params: {
          configType: "mode_codes"
        }
      }).then(res => {
        this.modeCodes = res.data;
      });
    },
    quotaHandles() {
      this.$http({
        url: `/paymentadmin/v1/extraconfig/query`,
        method: "GET",
        params: {
          configType: "limit_quota_handle"
        }
      }).then(res => {
        this.quotaHandle = res.data;
      });
    },
    isDel(channelId) {
      this.$http({
        url: `/paymentadmin/v1/channels/delete`,
        method: "GET",
        params: {
          channelId
        }
      })
        .then(res => {
          if (res.success == 1) {
            this.$message.success("删除成功");
            this.Savalist();
          } else {
            this.$message.error(res.errorMsg);
          }
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },
    isSelect() {
      this.savalist();
    },
    isDialog(type, data) {
      //console.log(`data,,,,`, data);
      this.msg = type;

      if (type == "新建支付渠道") {
        (this.icon = ""), (this.form = {}), (this.dialogVisible = true);
      } else {
        (this.channel_id = data.channelId),
          (this.form.channel_type = data.channel_type),
          (this.form.code = data.code),
          (this.form.founder = data.founder),
          (this.form.icon = data.icon),
          (this.form.is_reco = data.is_reco),
          (this.form.limit_quota = data.limit_quota),
          (this.form.limit_quota_handle = data.limit_quota_handle),
          (this.form.name = data.name),
          (this.form.serial_nodata = data.serial_nodata),
          (this.dialogVisible = true);
      }
    },
    isEmpty() {
      this.name = "";
      this.savalist();
    },
    handleAvatarSuccess(res) {
      if (this.msg == "编辑支付渠道") {
        this.form.icon = res.data;
      } else {
        this.icon = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只支持JPG/JPEG/png格式");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    isSubmit() {
      if (this.msg == "新建支付渠道") {
        if (this.icon !== "") {
          this.$http({
            url: `/paymentadmin/v1/channels/create`,
            method: "POST",
            data: {
              channel_type: this.form.channel_type,
              code: this.form.code,
              founder: this.form.founder || "",
              icon: this.icon,
              is_reco: Number(this.form.is_reco),
              limit_quota: this.form.limit_quota,
              limit_quota_handle: this.form.limit_quota_handle,
              name: this.form.name,
              serial_nodata: this.form.serial_nodata
            }
          })
            .then(res => {
              if (res.success == 1) {
                this.$message.success("添加成功");
                this.Savalist();
              } else {
                this.$message.error(res.errorMsg);
              }
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message.error("添加失败");
            });
        } else {
          this.$message.error("图片不能为空");
        }
      } else {
        this.$http({
          url: `/paymentadmin/v1/channels/edit`,
          method: "POST",
          data: {
            channel_id: this.channel_id,
            channel_type: this.form.channel_type,
            code: this.form.code,
            founder: this.form.founder || "",
            icon: this.form.icon || this.icon,
            is_reco: Number(this.form.is_reco),
            limit_quota: this.form.limit_quota,
            limit_quota_handle: this.form.limit_quota_handle,
            name: this.form.name,
            serial_nodata: this.form.serial_nodata
          }
        })
          .then(res => {
            if (res.success == 1) {
              this.$message.success("修改成功");
              this.Savalist();
            } else {
              this.$message.error(res.errorMsg);
            }
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      }
    },

    savalist() {
      const data = {
        name: this.name
      };
      this.$http({
        url: "/paymentadmin/v1/channels/list",
        method: "POST",
        data
      }).then(res => {
        //console.log(res.data);
        this.tableData = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-upload {
  border: 1px dashed #999999;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
.news {
  margin-left: 4%;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.orderList {
  background-color: #ebeef1;
  padding-right: 40px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: block;
  font-size: 16px;
  border-radius: 20px;
  // border-top-left-radius: 20px;
  // border-top-right-radius: 20px;
  list-style-type: none;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 100%;
  margin: 10px;
  height: 100%;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  padding-left: 10px;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .topfist {
      display: flex;
      align-items: center;
      // margin-top: 10px;
    }
    .el-input {
      width: 250px;
    }
  }
}
</style>
